import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { spaceShare, weiboShare, weixinShare, splitLine, highLight } from '@/utils/util';
import { findPolicyInfoNewsById } from '@/services/newsCenter';
import { Breadcrumb } from 'antd';
import { connect } from 'umi';
import type { Dispatch } from 'umi';

interface NewsDetailProps {
  dispatch: Dispatch;
}

const NewsDetail: React.FC<NewsDetailProps> = (props) => {
  const { dispatch } = props;
  const [newsDetail, setNewDetail] = useState({});
  useEffect(() => {
    const { id } = props.history.location.query;
    findPolicyInfoNewsById({ id }).then((res) => {
      setNewDetail(res.results);
    });
    window.scroll(0, 0);
  }, []);

  const gotoNews = () => {
    highLight(dispatch, 'NewsCenter');
  };

  return (
    <div className={styles.newsWrapper}>
      <div className={styles.newsBreadcrumb}>
        <Breadcrumb separator="">
          <Breadcrumb.Item>您的位置</Breadcrumb.Item>
          <Breadcrumb.Separator>:</Breadcrumb.Separator>
          <Breadcrumb.Item href="#/NewsCenter" onClick={gotoNews}>
            新闻中心
          </Breadcrumb.Item>
          <Breadcrumb.Separator />
          <Breadcrumb.Item>要闻</Breadcrumb.Item>
          <Breadcrumb.Separator />
          <Breadcrumb.Item>区内新闻</Breadcrumb.Item>
        </Breadcrumb>
      </div>
      <div className={styles.newsTitle}>{newsDetail.title}</div>
      <div className={styles.dateShare}>
        <div className={styles.date}>日期：{newsDetail.publishTime}</div>
        <div className={styles.share}>
          分享：
          <img src={weixinShare} />
          <img src={weiboShare} />
          <img src={spaceShare} />
        </div>
      </div>
      <img src={splitLine} className={styles.splitLine} />
      <div
        className={styles.richText}
        dangerouslySetInnerHTML={{ __html: newsDetail.content }}
      ></div>
    </div>
  );
};
export default connect(({ current }) => ({
  CurrentState: current.CurrentState,
}))(NewsDetail);
